<template>
  <SettingItem title="导航模式">
    <div class="setting-drawer-index-blockChecbox">
      <a-tooltip>
        <template #title>侧边栏导航</template>
        <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
          <img src="@/components/SettingDrawer/icons/sideMenu.svg" alt="sidemenu" />
          <div
            class="setting-drawer-index-selectIcon"
            v-if="store.userStore.layoutMode === 'sidemenu'"
          >
            <CheckOutlined />
          </div>
        </div>
      </a-tooltip>

      <a-tooltip>
        <template #title>顶部栏导航</template>
        <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
          <img src="@/components/SettingDrawer/icons/topMenu.svg" alt="topmenu" />
          <div
            class="setting-drawer-index-selectIcon"
            v-if="store.userStore.layoutMode === 'topmenu'"
          >
            <CheckOutlined />
          </div>
        </div>
      </a-tooltip>
    </div>
  </SettingItem>
</template>
<script lang="ts" setup name="NavigationMode">
import store from '@/store'

import { systemConfig } from '@/store/reactiveState'
import { TOGGLE_LAYOUT_MODE, TOGGLE_FIXED_SIDERBAR } from '@/store/mutation-types'
// import useSiteSettings from '@/store/useSiteSettings'
import { CheckOutlined } from '@ant-design/icons-vue'
import SettingItem from './SettingItem.vue'

// const { layoutMode } = useSiteSettings()
const handleLayout = (mode) => {
  if (store.userStore.layoutMode !== mode) {
    store.userStore.layoutMode = mode
  }
  // 因为顶部菜单不能固定左侧菜单栏，所以强制关闭
  // handleFixSiderbar(false)
}

const handleFixSiderbar = (mode) => {
  if (systemConfig.state.layout === 'topmenu') {
    systemConfig.commit(TOGGLE_FIXED_SIDERBAR, false)
    return
  }
  systemConfig.commit(TOGGLE_FIXED_SIDERBAR, fixed)
}
</script>
<style lang="less" scoped></style>
